<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-22 14:10:06
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page canback hasbtn title="创建行程">
    <b-button :param="handlerParam" @handler="handler"></b-button>
    <mx-date-picker :show.sync="showPicker" type="rangetime" :value="time" :show-tips="true" :begin-text="'开始日期'"
      :end-text="'结束日期'" :show-seconds="false" color="#6ABE83" @confirm.self="ed" @cancel.self="ed" />
    <view class="form">
      <view class="upload">
        <htz-image-upload :uploadSuccess="success" :sourceType="['camera', 'album']" chooseNum="6"
          :action="`${api}/tools/upload`" v-model="form.imgpath"></htz-image-upload>
      </view>
      <view class="info">
        <view class="single" :class="{ 'isExpand': v.isExpand }" v-for="(v, i) in info" :key="v.id">
          <view @click="toggle(v)" class="title">
            <view class="txt">
              <image class="icon" mode="aspectFit" :src="`../../static/img/icon/create-icon-${i + 1}.png`"></image>
              <view class="txt-inner">{{ v.title }}</view>
            </view>
            <image class="arrow" mode="aspectFit"
              :src="v.isExpand ? `../../static/img/icon/arrow-down.png` : `../../static/img/icon/arrow-right.png`">
            </image>
          </view>
          <view v-if="v.isExpand" class="option">
            <view class="single-option" v-for="(a, b) in v.option" :key="b">
              <input v-if="a.type == 'input'" class="input" :placeholder="a.placeholder"
                placeholder-class="formPlaceholader" v-model="form[a.key]" />
              <view @click.stop="DatePicker" v-if="a.type == 'time'" class="time"
                :class="{ 'formPlaceholader': form.starttime == '' || form.endtime == '' }">{{ currentTime ||
                  a.placeholder }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </l-page>
</template>

<script>
import bButton from "@/components/button/button";
import MxDatePicker from "@/components/time/mx-datepicker.vue";
import htzImageUpload from "@/components/upload/htz-image-upload.vue";
import { mapState } from 'vuex';
export default {
  name: "create",
  components: { bButton, MxDatePicker, htzImageUpload },
  data() {
    return {
      handlerParam: {
        type: "single",
        position: "fixed",
        list: [
          {
            title: "生成",
            bgcolor: "#6ABE83",
            color: "#ffffff",
          },
        ],
      },
      info: [
        {
          id: 0, title: '基本信息', isExpand: true,
          option: [{ placeholder: '请输入行程标题', key: 'title', type: 'input' },
          { placeholder: '请输入目的地', key: 'title', type: 'input' },
          { placeholder: '请输入集合地点', key: 'title', type: 'input' },
          { placeholder: '请输入解散地点', key: 'title', type: 'input' }]
        },
        {
          id: 1, title: '时间信息', isExpand: false,
          option: [{ placeholder: '请选择时间', key: 'title', type: 'time' },
          { placeholder: '请输入出行天数', key: 'title', type: 'input' }]
        },
        {
          id: 2, title: '其他信息', isExpand: false,
          option: [{ placeholder: '请输入人数上限', key: 'title', type: 'input' },
          { placeholder: '请输入年龄限制', key: 'title', type: 'input' },
          { placeholder: '请输入费用预估', key: 'title', type: 'input' }]
        },
      ],
      showPicker: false,
      time: [new Date().format("Y-m-d"), new Date().format("Y-m-d")],
      form: {
        title: '',
        starttime: '',
        endtime: '',
        imgpath: []
      }
    };
  },
  computed: {
    ...mapState(['api']),
    currentTime() {
      return this.form.starttime ? `${this.form.starttime.replace(/-/g, '.')}-${this.form.endtime.replace(/-/g, '.')}` : ''
    }
  },
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    toggle(v) {
      this.info.map(a => a.isExpand = a.id == v.id);
    },
    DatePicker() {
      this.showPicker = true;
    },
    ed(e) {
      this.showPicker = false;
      if (e.date) {
        this.form.starttime = e.date[0].format("Y-m-d");
        this.form.endtime = e.date[1].format("Y-m-d");
      }
    },
    success(res) {
      let _res = JSON.parse(res.data);
      if (_res.code == 200) {
        //#ifdef APP-PLUS
        plus.io.resolveLocalFileSystemURL(
          "_doc/",
          (entry) => {
            entry.removeRecursively(
              (entry) => {
                console.log("删除成功");
              },
              (err) => {
                console.log("删除失败");
              }
            );
          },
          (err) => {
            console.log("没找到对象");
          }
        );
        //#endif
        return {
          success: true,
          url: _res.data,
        };
      } else {
        return {
          success: false,
          url: "",
        };
      }
    },
    handler() {
      console.log(this.form);
    },
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
.form {
  padding: 20upx;
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;

  .info {
    padding: 28upx 18upx 20upx 34upx;
    width: 100%;
    background: #FFFFFF;
    border-radius: 8upx;
  }

  .single {
    position: relative;

    &:not(:last-child) {
      &.isExpand {
        padding-bottom: 38upx;
      }

      padding-bottom: 52upx;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 18upx;
        width: 4upx;
        height: 100%;
        background-color: #F5F5F5;
      }
    }

    .title {
      .flex();

      .txt {
        .flex(row, flex-start);
      }

      .txt-inner {
        padding-left: 14upx;
        font-size: 24upx;
        font-weight: 500;
        color: #333333;
        line-height: 36upx;
      }
    }

    .option {
      margin: 8upx 0 0 54upx;
      background: #F5F5F5;
      border-radius: 8upx;

      .single-option {
        .flex(row, flex-start);
        padding: 0 21upx;
        height: 80upx;

        &:not(:last-child) {

          .input,
          .time {
            .border-1px(bottom, #ffffff);
          }
        }
      }
    }
  }

  .icon {
    z-index: 1;
    position: relative;
    width: 40upx;
    height: 40upx;
  }

  .arrow {
    width: 24upx;
    height: 24upx;
  }
}

/deep/ .input,
.time {
  width: 100%;
  height: 100%;
  font-size: 24upx;
  color: #333333;
}

.time {
  .flex(row, flex-start);
}
</style>